<template>
  <view class="page flex-col">
    <view class="group_1 flex-row">
      <view class="box_1 flex-col">
        <view class="block_3 flex-row">
          <view class="image-text_1 flex-row justify-between">
			<uni-data-select
				class="selected"
				v-model="value"
				:localdata="range"
				@change="change"
			></uni-data-select>
          </view>
        </view>
        <view class="list_1 flex-col">
          <view
            class="list-items_1 flex-col"
            v-for="(item, index) in myOrderListData"
            :key="index"
          >
            <view class="text-wrapper_1 flex-row">
				<view class="device">
					<text class="text_3">{{item.orderName}}</text>
					<text class="text_4">X{{ item.orderNumber }}</text>
				</view>
              
              <text class="text_5">￥{{ item.orderPrice  }}</text>
            </view>
            <view class="text-wrapper_2 flex-row">
              <text class="text_6">{{ item.orderTime  }}</text>
			  <view class="profit">
			  	<text class="text_7">利润</text>
			  	<text class="text_8">{{item.profit}}%</text>
			  </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {myOrderList,userID} from '../../../api/system/user.js'
	export default {
		data() {
			return {
				value:0,
				range:[
					{ value: 1,text: '已完成' },
					{ value: 0,text: '未完成' }
				],
				userId:'',		//保存动态id的
				myOrderListData:[],
			}
		},
		onLoad(){
			this.myOrderListRes(this.value);
		},
		mounted(){
			
		},
		methods: {
			change(value){
				this.value = value
				this.myOrderListRes(value)
			},
			myOrderListRes(value) {
			console.log(value,'value')
			  userID().then(res=>{
				  let params = `userId=${res}&orderState=${value}`;
				  myOrderList(params).then(res => {
				    console.log('请求成功', res);
					// 假设 orders 是你的列表
					for (let i = 0; i < res.length; i++) {
					  if (res[i].orderState === toString(value)) {
					    res.splice(i, 1); // 删除满足条件的元素
					    i--; // 由于删除了一个元素，需要将索引减1
					  }
					}
				    this.myOrderListData = res;
					
				  });
			  });
			}
		}
	}
</script>
<style>
	@import url("../../common/common.css");
	
	::v-deep .uni-select{
		width: 120px;
		background-color: rgba(41, 167, 244, 1);
		border-radius: 15px;
		text-align: center;
	}
	::v-deep .uni-select__input-text{
		color: #fff;
	}
</style>
<style lang="scss">
	// .selected{
	// 	width: 100px; /* 自定义组件的宽度 */
	// 	  height: 35px; /* 自定义组件的高度 */
	// 	  background-color: rgba(41, 167, 244, 1); /* 自定义组件的背景颜色 */
	// 	  border-radius: 10px;
	// 	  position: relative;
	// 	  left: -6px;
	// }
	.page {
	  background-color: rgba(246, 247, 251, 1);
	  // position: relative;
	  width: 100vw;
	  // height: 100vh;
	  height: calc(100vh - 44px);
	  overflow: hidden;
	  .group_1 {
	    .box_1 {
	      // margin-bottom: 33px;
	      padding: 14px 14px 0 16px;
		  margin: auto;
		  
	      .block_1 {
	        width: 345px;
	        .text_1 {
	          overflow-wrap: break-word;
	          color: rgba(0, 0, 0, 1);
	          font-size: 15px;
	          letter-spacing: -0.3333333432674408px;
	          font-family: Helvetica, 'Microsoft YaHei', Arial, sans-serif;
	          font-weight: NaN;
	          text-align: center;
	          white-space: nowrap;
	          line-height: 18px;
	        }
	        .image_1 {
	          width: 67px;
	          height: 11px;
	          margin: 3px 0 4px 0;
	        }
	      }
	      .block_2 {
	        width: 204px;
	        margin: 23px 141px 0 0;
	        .thumbnail_1 {
	          width: 17px;
	          height: 17px;
	          margin: 3px 0 2px 0;
	        }
	        .text_2 {
	          overflow-wrap: break-word;
	          color: rgba(34, 34, 34, 1);
	          font-size: 16px;
	          font-weight: NaN;
	          text-align: center;
	          white-space: nowrap;
	          line-height: 22px;
	        }
	      }
	      .block_3 {
	        border-radius: 8px;
	        // margin: 21px 231px 0 4px;
	        // padding: 6px 20px 6px 20px;
	        .image-text_1 {
				.sticky-container {
				  position: sticky;
				  top: 0;
				  z-index: 999;
				}
	          width: 70px;
	          .text-group_1 {
	            overflow-wrap: break-word;
	            color: rgba(255, 255, 255, 1);
	            font-size: 16px;
	            font-weight: NaN;
	            text-align: center;
	            white-space: nowrap;
	            line-height: 22px;
	          }
	          .thumbnail_2 {
	            width: 14px;
	            height: 8px;
	            margin: 7px 0 7px 0;
	          }
	        }
	      }
	      .list_1 {
			overflow: auto; /* 添加这行代码来设置滚动条 */
	        height: calc(100vh - 100px);
	        margin: 10px auto;
	        .list-items_1 {
	          background-color: rgba(255, 255, 255, 1);
	          border-radius: 8px;
	          margin-bottom: 15px;
	          padding: 15px 20px 10px 20px;
	        .text-wrapper_1 {
	          display: flex;
	          justify-content: space-between; /* 两端对齐 */
	        
	          .device {
	            text-align: left; /* 文本左对齐 */
	          }
	        
	          .text_3 {
	            overflow-wrap: break-word;
	            color: rgba(34, 34, 34, 1);
	            font-size: 15px;
	            font-family: PingFangSC-Semibold;
	            font-weight: 600;
	            white-space: nowrap;
	            line-height: 21px;
	            margin-top: 1px;
	          }
	          
	          .text_4 {
	            overflow-wrap: break-word;
	            color: rgba(153, 153, 153, 1);
	            font-size: 10px;
	            font-weight: NaN;
	            white-space: nowrap;
	            line-height: 21px;
	            margin: 1px 0 0 4px;
	          }
	          
	          .text_5 {
	            overflow-wrap: break-word;
	            color: rgba(41, 167, 244, 1);
	            font-size: 16px;
	            font-family: PingFangSC-Semibold;
	            font-weight: 600;
	            white-space: nowrap;
	            line-height: 22px;
	            text-align: left; /* 将文字左对齐 */
	            margin-left: 0;
	          }
	        }
	          .text-wrapper_2 {
	            margin-top: 2px;
				display: flex;
	            .text_6 {
	              overflow-wrap: break-word;
	              color: rgba(34, 34, 34, 1);
	              font-size: 13px;
	              font-weight: NaN;
	              text-align: left;
	              white-space: nowrap;
	              line-height: 18px;
	              margin-top: 2px;
	            }
	           .profit{
				   .text_7 {
				     overflow-wrap: break-word;
				     color: rgba(34, 34, 34, 1);
				     font-size: 12px;
				     font-weight: NaN;
				     text-align: right;
				     white-space: nowrap;
				     line-height: 17px;
				     margin: 2px 0 0 190px;
				   }
				   .text_8 {
				     overflow-wrap: break-word;
				     color: rgba(34, 34, 34, 1);
				     font-size: 15px;
				     font-weight: NaN;
				     text-align: right;
				     white-space: nowrap;
				     line-height: 21px;
				     margin-left: 4px;
				   }
			   }
	          }
	        }
	      }
	    }
	  }
	}
</style>
